<template>
	<view style="margin-bottom: 100rpx;">
		
		<uni-nav-bar title="购物车" backgroundColor="#ffffff" status-bar :fixed="true" :border="false">
			<!-- <block slot="left">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
					<view @click="goBack" style="margin-left: 10px;">
						<uni-icons type="back" size="20" color="#666" />
					</view>
					<view @click="goHome" style="margin-left: 10px;">
						<uni-icons type="home" size="20" color="#666" />
					</view>
				</view>
			</block> -->
		</uni-nav-bar>
		
		<view v-if="userInfo === ''" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0rpx 0 100rpx 0;" :style="{height: `${windowHeight-150}px`}">
			<view>
				<image src="../../static/images/xiaolian.png" style="width: 50px;height: 50px;"></image>
			</view>
			<view style="margin-top: 10px;font-size: 14px;color: #6F6F6F;">
				您还未登录哟，快去登录吧~
			</view>
			<view @click="handGoToLogin" style="margin-top: 20px;background: linear-gradient(to right,#c2b292,#dacdbe);border-radius: 25px;width: 150px;height: 35px;color: #333333;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 14px;">
				立即登录
			</view>
		</view>
		
		<view v-if="userInfo !== ''">
			
			<view  v-if="wxCartList.length > 0" style="display: flex;flex-direction: column;padding-bottom: 80px;position: relative;" :style="{height: `${wHeight }px`}">
				
				<view style="height: 65px;position: absolute;width: 100%;bottom: 0;display: flex;flex-direction: row;align-items: center;background-color: #ffffff;padding: 0 10px 0px 10px;">
					<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
						<!-- 全选 -->
						<view @click="handGoodsAllSelect" style="display: flex;flex-direction: row;align-items: center;">
							<!-- 商品勾选状态（0：勾选 1：未勾选）默认：0 -->
							<view v-if="goodsAllSelect === 0" style="border-radius: 25px;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;background-color: #E8CF83;flex-direction: row;">
								<uni-icons color="#fff" type="checkmarkempty" size="14"></uni-icons>
							</view>
							<view v-if="goodsAllSelect === 1" style="border-radius: 25px;width: 20px;height: 20px;border: 1px solid #6F6F6F;"></view>
							<view style="font-size: 14px;color: #BBBBC4;margin-left: 5px;">
								全选
							</view>
						</view>
						<view style="display: flex;flex-direction: column;justify-content: flex-end;flex: 1;padding-left: 10px;">
							<view style="display: flex;flex-direction: row;align-items: center;">
								<text style="font-size: 14px;color: #333333;">
									合计:
								</text>
								<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;">
									<view style="padding-top: 3px;">
										<text style="font-size: 12px;color: #BFA558;font-weight: 600;">
											￥
										</text>
									</view>
									<text style="font-size: 20px;color: #BFA558;font-weight: 600;margin-right: 10px;">
										{{goodsTotalMoney}}
									</text>
								</view>
							</view>
							<view style="display: flex;flex-direction: row;align-items: center;">
								<text style="font-size: 12px;color: #333333;">
									已选 {{goodsSelectNumber}} 件
								</text>
								<text style="font-size: 12px;color: #b9b9b9;margin-left: 5px;">
									优惠减:¥{{memberDiscountMoney}}
								</text>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;">
						<view @click="handGoToPay" style="border-radius: 25px;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 14px;color: #000000;background: linear-gradient(to right,#F3E9B4,#EBDB9B);width: 120px;height: 40px;margin: 0 5px 0 0px;font-weight: 600;">
							结算
						</view>
					</view>
				</view>
				<scroll-view style="padding-bottom: 0px;height: 100%;border: 0px solid black;" scroll-top="0" scroll-y="true">
					<!-- 商品列表 -->
					<view style="border: 0px solid red;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						
						<!-- 展示商品列表 -->
						<view v-for="(item,index) in wxCartList" :key="index" style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;margin-bottom: 10px;">
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
								<uni-icons @click="handOneClearCart(item)" type="trash" color="#8F8F8F" size="20"></uni-icons>
							</view>
							<view style="height: 110px;margin: 0px 0 10px 0;display: flex;flex-direction: row;">
								<!-- 商品选中 -->
								<view style="height: 100%;display: flex;flex-direction: row;align-items: center;margin-right: 10px;">
									<!-- 商品勾选状态（0：勾选 1：未勾选）默认：0 -->
									<view @click="handGoodsOneSelect(item)" v-if="item.goodsCheckStatus === 0" style="border-radius: 25px;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;background-color: #E8CF83;flex-direction: row;">
										<uni-icons color="#fff" type="checkmarkempty" size="14"></uni-icons>
									</view>
									<view @click="handGoodsOneSelect(item)" v-if="item.goodsCheckStatus === 1" style="border-radius: 25px;width: 20px;height: 20px;border: 1px solid #6F6F6F;"></view>
								</view>
								<view>
									<!-- <image style="width: 120px;height: 100%;border-radius: 5px;" src="../../static/images/noPics.png"></image> -->
									<image style="width: 120px;height: 100%;border-radius: 5px;" :src="item.goodsData.mallGoodsBannerList[0].bannerPic"></image>
								</view>
								<view style="flex:1;padding: 5px 0 0 10px;display: flex;flex-direction: column;border: 0px solid red;">
									<view style="">
										<text :decode="true" style="color: #242424;font-size: 14px;font-weight: 600;
												line-height: 20px;overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{item.goodsData.goodsName}}
											<!-- 百事可乐 碳酸饮料 330ml/罐 怡宝 饮用水 6I/桶 -->
										</text>
									</view>
									<!-- 判断是否存在商品规格，如存在，则显示 -->
									<view v-if="item.goodsSpecs !== null" style="margin-top: 5px;">
										<text v-if="item.goodsSpecs.length == 1" :decode="true" style="color: #BEBEBE;font-size: 12px;
												overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{item.goodsSpecs[0].key}} {{item.goodsSpecs[0].val}}
										</text>
										<text v-if="item.goodsSpecs.length == 2" :decode="true" style="color: #BEBEBE;font-size: 12px;
												overflow: hidden;
												word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
											{{item.goodsSpecs[0].key}} {{item.goodsSpecs[0].val}} | {{item.goodsSpecs[1].key}} {{item.goodsSpecs[1].val}}
										</text>
									</view>
									<!-- 显示商品金额，数量 -->
									<view style="flex:1;display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
										<view style="font-size: 16px;color: #C1A85E;">
											¥{{item.goodsMoney}}
										</view>
										<view style="display: flex;flex-direction: row;align-items: center;">
											<view style="">
												<uni-number-box @change="changeGoodsNumberVal(item)" :min="1" :max="9999" v-model="item.goodsNumber" />
											</view>
										</view>
									</view>
									
									
								</view>
							</view>
						</view>
						
						
					</view>
					
					<!-- 其他 备用格式-->
<!-- 					<view style="border: 2px solid blueviolet;padding: 10px 10px 0px 10px;display: flex;flex-direction: column;">
						<view style="background-color: #ffffff;border-radius: 5px;padding: 10px;display: flex;flex-direction: column;">
							
						</view>
					</view> -->
				</scroll-view>
			</view>
			<view v-if="wxCartList.length === 0" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin: 0rpx 0 100rpx 0;" :style="{height: `${windowHeight-150}px`}">
				<view>
					<image src="../../static/images/goods1.png" style="width: 50px;height: 50px;"></image>
				</view>
				<view style="margin-top: 10px;font-size: 14px;color: #6F6F6F;">
					购物车是空的哟，快去商城选购吧~
				</view>
				<view @click="handGoToShop" style="margin-top: 20px;background: linear-gradient(to right,#c2b292,#dacdbe);border-radius: 25px;width: 150px;height: 35px;color: #333333;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 14px;">
					现在去逛逛
				</view>
			</view>
			
		</view>
	
		
		
	</view>
</template>

<script>
	import BigNumber from '@/api/bignumber.js'
	
	export default {
		name:'shopping',
		onLoad(option) {
			//console.log('__购物车___')
		},
		onShow() {
			console.log(this.userInfo,'___购物车_当前用户信息__')
			this.initCartData();
		},
		created() {
			
		},
		computed:{
			userInfo() {
				return this.$store.state.user.userinfo
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 0
			},
			wHeight(){
				const h = uni.getSystemInfoSync().windowHeight;
				const h1 = uni.getSystemInfoSync().screenHeight - h;
				return h-h1-15
			}
		},
		data() {
			return {
				txCloudEnvID:getApp().globalData.config.appInfo.txCloudEnvID,
				vxService:getApp().globalData.config.appInfo.vxService,
				wxCartList:[],//购物车列表
				goodsAllSelect:0,//商品勾选状态（0：勾选 1：未勾选）默认：0
				goodsSelectNumber:0,//商品已选件数
				totalMoney:0,//商品总金额
				goodsTotalMoney:0,//商品 折后总金额
				memberDiscountMoney:0,//会员折扣减免
				
			}
		},
		components:{
		},
		methods: {
			initCartData(){
				if(this.userInfo){
					this.wxCartList = [];
					console.log(this.userInfo.clientId,'___购物车userInfo_客户主键id__')
					
					wx.cloud.callContainer({
					  "config": {
					    "env": this.txCloudEnvID
					  },
					  "path": "/system/wxCart/list?clientId="+this.userInfo.clientId,
					  "header": {
					    "X-WX-SERVICE": this.vxService,
					    "content-type": "application/json"
					  },
					  "method": "GET",
					  "data": ""
					}).then((res) =>{
						console.log(res);
						
						let tempList = [];
						tempList = res.data.data;
						if(tempList.length > 0){
							this.wxCartList = [];
							this.totalMoney = 0;
							this.goodsTotalMoney = 0;
							this.memberDiscountMoney = 0,//会员折扣减免
							this.goodsSelectNumber = 0;
							this.goodsAllSelect = 0;//商品勾选状态（0：勾选 1：未勾选）默认：0
							
							tempList.forEach((item) =>{
								let formData = null;
								let goodsData = '';
								goodsData = JSON.parse(item.goodsData);
								//console.log(goodsData,'_________解析后_goodsData__-')
								let goodsSpecs = null;//商品规格
								let jsonGoodsSpecs = goodsData.skuInfo.goodsSpecs;
								if(jsonGoodsSpecs !== null){
									goodsSpecs = JSON.parse(jsonGoodsSpecs);
								}
								
								//保留小数点后两位,商品单价
								let goodsMoney = '';
								goodsMoney = new BigNumber(goodsData.skuInfo.discountPrice).toFixed(2, 1);
								
								// 商品勾选状态（0：勾选 1：未勾选）默认：0,只统计勾选后的商品总金额
								if(item.goodsCheckStatus === 0){
									//商品已选择件数
									this.goodsSelectNumber += item.goodsNumber;
									
									//商品单价 * 数量 = 总金额
									const x = new BigNumber(this.totalMoney).toFixed(2, 1);
									const y = new BigNumber(goodsMoney).times(item.goodsNumber).toFixed(2, 1);
									//console.log(y,'__单一__商品金额____')
									
									this.totalMoney  = new BigNumber(x).plus(new BigNumber(y)).toFixed(2, 1);
									//console.log(this.totalMoney,'_______商品总金额_____')
								}else{
									this.goodsAllSelect = 1;//表示存在未勾选的商品，
								}
								
								formData = {
									'cartId': item.cartId,
									'clientId': item.clientId,
									'goodsData': goodsData,
									'goodsNumber': item.goodsNumber,
									'goodsCheckStatus': item.goodsCheckStatus,
									'createTime': item.createTime,
									'goodsSpecs':goodsSpecs,//商品规格
									'goodsMoney':goodsMoney,//商品金额
								}
								this.wxCartList.push(formData);
							});
							
							//this.memberDiscountMoney = 0,//会员折扣减免
							//根据会员级别折扣计算付款金额：公式：总价×折扣/10
							console.log(this.userInfo.mallMember.memberDiscount,'__当前会员折扣__')
							//商品打折后总金额
							this.goodsTotalMoney = new BigNumber(this.totalMoney).times(this.userInfo.mallMember.memberDiscount).div(10).toFixed(2, 1);
							console.log(this.goodsTotalMoney,'_______商品-打折后总金额_____')
							
							//会员折扣减免
							this.memberDiscountMoney = new BigNumber(this.totalMoney).minus(new BigNumber(this.goodsTotalMoney)).toFixed(2, 1);
							console.log(this.memberDiscountMoney,'___会员 减免折扣金额____')
							
							console.log(this.wxCartList,'__this.wxCartList__',this.wxCartList.length);
							
						}
						
					}).catch((e) =>{
						console.log(e.message);
						if(e.message.indexOf('102002') !== -1){
							this.$modal.showToast('请求超时')
						}else{
							this.$modal.showToast(e.message)
						}
					})
				}
				
			},
			handGoToPay(){//结算
				console.log('_______结算____-')
			
				
			},
			handGoodsAllSelect(){//商品全选
				let _this = this;
				console.log(_this.goodsAllSelect,'_______goodsAllSelect______')
				let status = _this.goodsAllSelect === 1?0:1;
				wx.cloud.callContainer({
				  "config": {
				    "env": this.txCloudEnvID
				  },
				  "path": "/system/wxCart/updateGoodsCheckStatusByclientId",
				  "header": {
				    "X-WX-SERVICE": this.vxService,
				    "content-type": "application/json"
				  },
				  "method": "POST",
				  "data": {
				    "clientId": _this.userInfo.clientId,
				    "goodsCheckStatus": status
				  }
				}).then((res) =>{
					console.log(res);
					_this.initCartData();
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						this.$modal.showToast('请求超时')
					}else{
						this.$modal.showToast(e.message)
					}
				})
			},
			handGoodsOneSelect(item){//勾选单一商品
				console.log(item,'____主键id________勾选单一商品______-',item.cartId)
				let _this = this;
				let status = item.goodsCheckStatus === 1?0:1;
				wx.cloud.callContainer({
				  "config": {
				    "env": this.txCloudEnvID
				  },
				  "path": "/system/wxCart",
				  "header": {
				    "X-WX-SERVICE": this.vxService,
				    "content-type": "application/json"
				  },
				  "method": "PUT",
				  "data": {
				    "cartId": item.cartId,
				    "goodsCheckStatus": status
				  }
				}).then((res) =>{
					//console.log(res);
					_this.initCartData();
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						this.$modal.showToast('请求超时')
					}else{
						this.$modal.showToast(e.message)
					}
				})
			},
			handOneClearCart(item){//删除单一商品
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否删除该商品？',
					success: function (res) {
						if (res.confirm) {
							console.log(item.cartId,'____主键id________删除单一商品______-')
							wx.cloud.callContainer({
							  "config": {
							    "env": _this.txCloudEnvID
							  },
							  "path": "/system/wxCart/"+item.cartId,
							  "header": {
							    "X-WX-SERVICE": _this.vxService,
							    "content-type": "application/json"
							  },
							  "method": "DELETE",
							  "data": ""
							}).then((res) =>{
								//console.log(res);
								_this.initCartData();
							}).catch((e) =>{
								console.log(e.message);
								if(e.message.indexOf('102002') !== -1){
									_this.$modal.showToast('请求超时')
								}else{
									_this.$modal.showToast(e.message)
								}
							})
						}
					}
				});
			},
			changeGoodsNumberVal(item){
				let _this = this;
				console.log(item.cartId,'__主键id____改变商品数量__index_black__-',item.goodsNumber)
				
				wx.cloud.callContainer({
				  "config": {
				    "env": _this.txCloudEnvID
				  },
				  "path": "/system/wxCart",
				  "header": {
				    "X-WX-SERVICE": _this.vxService,
				    "content-type": "application/json"
				  },
				  "method": "PUT",
				  "data": {
				    "cartId": item.cartId,
				    "goodsNumber": item.goodsNumber
				  }
				}).then((res) =>{
					//console.log(res);
					_this.initCartData();
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						_this.$modal.showToast('请求超时')
					}else{
						_this.$modal.showToast(e.message)
					}
				})
			},
			handGoToShop(){//跳转购物首页
				this.$tab.reLaunch("/pages/index");
			},
			handGoToLogin(){//跳转登录界面
				this.$tab.reLaunch("/pages/mine/index");
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6;
	}

</style>
